<template>
<!-- 单个推荐列表 -->
  <div class="ColletorImg" v-if="list">
      <ul>
          <li v-for="icon in list.collect_users" :key="icon.id">
              <van-image
                    width="100%"
                    lazy-load
                    :src="icon.p"
                    :round="true"
                >
                    <template v-slot:loading>
                        <img src="../assets/images/head.png" alt="">
                    </template>
                </van-image>
          </li>
      </ul>
       <span>{{list.collect_count_text}}</span>
  </div>
</template>

<script>

export default {
    components:{
    },
    props:['list'],
}
</script>

<style lang="less" >
.ColletorImg{
    height: 50px;
    line-height: 50px;
    display: flex;
    align-items: center;
    font-size: 15px;
    // background-color: pink;
    ul{
        height: 100%;
        display: flex;
        align-items: center;
        li{
            display: inline-block;
            width: 25px;
            height: 25px;
            line-height: 25px;
            border-radius: 50%;
            background-color: rgb(240, 231, 231);
            &:nth-child(2){
                margin-left: -5px;
            }
            &:nth-child(3){
                margin-left: -7px;
            }
            &:nth-child(4){
                margin-left: -9px;
            }
            .van-image{
                .van-image__img{

                    transform: scale(0.9);
                }

            }
        }
    }
    span{
        margin-left: 10px;
        line-height: 55px;
        height: 100%;
    }
}
</style>